<template>
  <div class="app-container">
    <h2 class="_title">金刚区控制</h2>

    <el-row :gutter="10" class="mb8">
      <el-button type="primary" v-hasPermi="['marketing:activityControl:add']" @click="handleEdit()"
        >新增</el-button
      >
      <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>

    <el-table v-loading="loading" row-key="id" :data="list">
      <el-table-column label="icon图" align="center" prop="imgUrl" width="120">
        <template #default="{ row }">
          <el-image class="row_img" :src="row.imgUrl" />
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="name" width="120" />
      <el-table-column label="跳转页面URL" align="center" prop="pageUrl" />
      <el-table-column label="开关" align="center" width="120" prop="status">
        <template #default="{ row }">
          <el-switch
            width="57"
            v-model="row.status"
            size="large"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="开"
            inactive-text="关"
            :loading="row.loading"
            @change="handleChange(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['marketing:activityControl:edit']"
            type="primary"
            link
            @click="handleEdit(row, 'edit')"
            >编辑</el-button
          >
          <el-button
            v-hasPermi="['marketing:activityControl:delete']"
            type="primary"
            link
            @click="handleEdit(row, 'delete')"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column align="center" width="160">
        <template #default="scoped">
          <div class="operationBox">
            <el-button
              v-show="scoped.$index !== 0"
              text
              size="large"
              @click.stop="handleoOperationSort(true, scoped.$index)"
              :icon="ArrowUpBold"
            />
            <el-button
              v-show="list.length - 1 !== scoped.$index"
              text
              size="large"
              @click.stop="handleoOperationSort(false, scoped.$index)"
              :icon="ArrowDownBold"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <editDialog ref="editDialogRef" @refreshList="getList" />
  </div>
</template>
<script setup>
import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
import editDialog from './components/editDialog.vue'
import {
  getMiniJinGangListApi,
  deleteMiniJinGangApi,
  postUpdateMiniJinGangApi,
  postSortMiniJinGangApi
} from '@/api/marketing/activityControl'

const editDialogRef = ref()
const showSearch = ref(true)
const loading = ref(false)
const total = ref(0)
const list = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const isSwitchVal = computed(() => {
  const filterList = list.value.filter((i) => i.status)
  return filterList.length >= 4
})
/**编辑 */
function handleEdit(item, type) {
  console.log(item)

  if (type === 'edit') {
    editDialogRef.value.init(item)
    return
  } else if (type === 'delete') {
    ElMessageBox.confirm(
      `您确定要删除【${item.name}】吗?删除后不可恢复，请谨慎操作。确定继续吗?`,
      '操作',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        center: false
      }
    ).then(() => {
      deleteMiniJinGangApi(item.id).then(() => {
        getList()
      })
    })
    return
  }
  editDialogRef.value.init()
}
/**限制展示的时候至少要展示4个 */
function handleChange(item) {
  if (!isSwitchVal.value && !item.status) {
    toggleSwitchVal(item, 1)
    ElMessage.warning('至少展示4个')
    return
  }

  item.loading = true
  const action = item.status ? '开启' : '关闭'
  const showTips = item.status ? '对用户可见' : '隐藏'
  ElMessageBox.confirm(
    `您将${action}【${item.name}】的显示，该活动将在小程序金刚区${showTips}。确定继续吗?`,
    '操作',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: false
    }
  )
    .then(() => {
      const params = {
        id: item.id,
        status: item.status
      }
      console.log({ params })
      postUpdateMiniJinGangApi(params).then(() => {
        getList()
      })
    })
    .catch(() => {
      toggleSwitchVal(item, item.status ? 0 : 1)
    })
    .finally(() => {
      item.loading = false
    })
}
/** 切换开关阀 */
function toggleSwitchVal(item, value) {
  const targetItem = list.value.find((i) => i.name === item.name)
  if (targetItem) {
    targetItem.status = value
  }
}
const paramsList = computed(() => list.value)
function handleoOperationSort(type, index) {
  console.log(type, index)
  const item = paramsList.value.splice(index, 1)[0]
  const newIndex = type ? index - 1 : index + 1
  paramsList.value.splice(newIndex, 0, item)
  const params = paramsList.value.map((i, _index) => {
    return { ...i, sort: _index + 1 }
  })
  postSortMiniJinGangApi(params).then((res) => {
    list.value = res?.data || []
  })
}

function getList() {
  getMiniJinGangListApi(queryParams.value).then((res) => {
    list.value = res?.data.map((i) => ({ ...i, loading: false }))
    total.value = res?.total || 0
  })
}
getList()
</script>
<style lang="scss" scoped>
// 隐藏表头
::v-deep .el-table__header-wrapper {
  display: none;
}
._title {
  height: 80px;
  line-height: 80px;
  background: #fafafa;
  padding: 0 30px;
  border: 1px solid #eee;
}
.row_img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.operationBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  ::v-deep .el-button {
    margin-left: 0px;
  }
}
</style>
